<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/common/includes.jsp" %>

<!DOCTYPE html>
<html lang="${currentLocale}">
<head>
	<title>zzzzzz - </title>
	<%@ include file="/WEB-INF/common/meta.jsp" %>
	<%@ include file="/WEB-INF/common/global_res.jsp" %>
</head>
<body>
<%@ include file="/WEB-INF/common/header.jsp" %>
<div class="container">
	<div class="row">
		<div class="span9" style="width: 520px;">
			<div class="row-fluid">
				<div class="span12">
					${picItemView.idx} / ${picItemView.count}
				
					<c:if test="${picItemView.prevId != null}">
						<a href="${ctx}/picitem/${picItemView.prevId}">上一张</a>
					</c:if>
					<c:if test="${picItemView.nextId != null}">
						<a href="${ctx}/picitem/${picItemView.nextId}">下一张</a>
					</c:if>
				</div>
			</div>
			<div class="row-fluid">
				<div class="span12">
				    <c:url var="imgUrl" value="/img/picitem/n/${picItemView.id}.jpg" />
				    <c:if test="${picItemView.nextId != null}">
						<a href="${ctx}/picitem/${picItemView.nextId}">
					</c:if>
					<img src="${imgUrl}" />
					<c:if test="${picItemView.nextId != null}">
						</a>
					</c:if>
				</div>
			</div>
			<div class="row-fluid">
				<div class="span12">
				    <p>${picItemView.textS}</p>
				</div>
			</div>
       		<div class="row-fluid">
        		<div class="span12">
         			${picItemView.updDt} ${picItemView.looks} / ${picItemView.likes} / ${picItemView.replies}
         		</div>
         	</div>
			<div class="row-fluid">
				<div class="span12">
					<div class="topic-viewpoint well well-small">
						<a href="/u/${picItemView.website}">
							<img src="/img/u/s/${picItemView.userId}.jpg" class="thumb thumb_32 img-rounded" style="margin-right:10px;" />
							${picItemView.username}
						</a> 
						<i class="icon-time" style="margin-left: 10px;"></i> ${picItemView.updDt}
						<button type="button" class="btn" id="likesBtn">
							${picItemView.likes}
							<i class="icon-heart"></i> 我有同感
						</button>
					</div>
				</div>
			</div>										
			<div id="replySpan" class="row-fluid">
				<div class="span12" style="width:520px;">
					<shiro:user>
						<form id="replyForm">
						    <fieldset>
						        <legend>
						            	评论  <span class="pull-right" id="replyCount"><i class="icon-comment"></i>${replyViewListCount}</span>
						        </legend>
						        <textarea name="text" style="width: 505px;height: 60px;" placeholder="请文明发言"></textarea>
						        <button type="submit" class="btn" id="replySubmitBtn" style="text-align: center;">
						            	提交
						        </button>
						        <span id="replyMsg"></span>
						    </fieldset>
						</form>
					</shiro:user>
					<shiro:guest>
						<div class="alert">
						  	<a href="/logon?back=${backUrl}"><span class="btn btn-small btn-primary">请登录后再评论</span></a>
						</div>
					</shiro:guest>
				</div>
			</div>
			<div class="row-fluid">
				<div class="span12" id="replies">
					<c:forEach var="replyView" items="${replyViewList}" varStatus="status">
						<div class="comment-item">
						    <div class="pic">
						        <a href="/u/${replyView.website}">
									<img src="/img/u/s/${replyView.userId}.jpg" class="thumb thumb_50 img-rounded" />
								</a>
						    </div>
						    <div class="content report-comment">
						        <div class="author">
						          ${replyView.addDt}
						          <a href="/u/${replyView.website}">${replyView.username}</a>
						        </div>
						        <p>${replyView.text}</p>
						    </div>
						</div>
					</c:forEach>
				</div>
			</div>
			
			<div class="row-fluid">
				<div class="span12">
					<section id="replyViewListPageBar">
						${replyViewListPageBar}	
					</section>
				</div>
			</div>
		</div>
		<div class="span3">
			
		</div>
	</div>
</div>
<%@ include file="/WEB-INF/common/footer.jsp" %>

</body>
<script type="text/javascript">
	$(function() {
		$("#replySubmitBtn").click(function(){
			var replyText = $('#replyForm :input[name="text"]').val();
			if(replyText == null || replyText == ''){
				$('#replyMsg').html('<i class="icon-warning-sign"></i>&nbsp;请填写评论内容');
        		$('#replyMsg').attr('class', 'alert');
        		return false;
			}
			
			$('#replySubmitBtn').attr('disabled','disabled');
			var form = $('#replyForm').serialize();
			var url = '/content/reply/picitem/${picItemView.id}';
			$.ajax({
				type: "POST",
		        url: url,
		        data: form,
		        success: function(data){
		        	console.log(data);
		        	if(data.type == 'SUCCESS'){
		        		var replyMsg = jQuery.parseJSON(data.json);
		        		var userLink = '/u/${currentUser.id}';
		        		
		        		var html = '<div class="comment-item">';
		        		html += '<div class="pic">';
		        		html += '<a href="'+userLink+'">';
		        		html += '<img src="/img/u/s/${currentUser.id}.jpg" class="thumb thumb_50 img-rounded" />';
		        		html += '</a>';
		        		html += '</div>';
		        		html += '<div class="content report-comment">';
		        		html += '<div class="author">';
		        		html += replyMsg.addDt;
		        		html += '<a href="'+userLink+'">${currentUser.username}</a>';
		        		html += '</div>';
		        		html += '<p>'+replyMsg.text+'</p>';
		        		html += '</div>';
		        		html += '</div>';
		        		
		        		$('#replies').append(html);
		        		$('#replyCount').text(replyMsg.count);
		        	}
		        	$('#replySubmitBtn').removeAttr('disabled');
	        		$('#replyForm :input[name="text"]').val('');
		        	$('#replyMsg').html(data.text);
	        		$('#replyMsg').attr('class', data.cssClass);
		        },
		        error: function(){
		        	alert("err");
		        }
		    });
		});
	});
</script>
</html>